<template>
  <a-modal
    title="新增字典"
    :maskClosable="false"
    :width="1050"
    :footer="null"
    placement="right"
    @cancel="onClose"
    :visible="dictAddVisiable"
  >
    <a-form-model :model="dict" :rules="rules" ref="dictAddForm">
      <a-form-model-item label='字段' v-bind="formItemLayout" prop="fieldName">
        <a-input v-model="dict.fieldName"/>
      </a-form-model-item>
      <a-form-model-item
        v-for="(item, index) in dict.items"
        :key="item.key"
        v-bind="formItemLayout"
        label="键值"
      >
        <a-row>
          <a-col span="23">
            <a-input-group compact>
              <a-input v-model="item.keyy" style="width: 40%" placeholder="键"/>
              <a-input v-model="item.valuee" style="width: 50%" placeholder="值"/>
            </a-input-group>
          </a-col>
          <a-col span="1">
            <a-icon
              v-if="dict.items.length > 0"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="dict.items.length === 0"
              @click="removeItem(item)"
            />
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 100%;margin-bottom: 3rem" @click="addItem">
          <a-icon type="plus"/>
          添加键值
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: {span: 3},
  wrapperCol: {span: 18}
}
export default {
  name: 'DictAdd',
  props: {
    dictAddVisiable: {
      default: false
    }
  },
  data () {
    return {
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      dict: {
        fieldName: '',
        items: []
      },
      rules: {
        fieldName: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {max: 100, message: '长度不能超过100个字符', trigger: 'blur'}
        ]
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          sm: {span: 18, offset: 3}
        }
      }
    }
  },
  methods: {
    removeItem (item) {
      let index = this.dict.items.indexOf(item)
      if (index !== -1) {
        this.dict.items.splice(index, 1)
      }
    },
    addItem () {
      this.dict.items.push({
        keyy: '',
        valuee: '',
        key: Date.now()
      })
    },
    reset () {
      this.loading = false
      this.dict = {
        fieldName: '',
        items: []
      }
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    handleSubmit () {
      this.loading = true
      this.$refs['dictAddForm'].validate(valid => {
        if (valid) {
          this.$post('dict', {
            dictListJson: JSON.stringify(this.dict)
          }).then((res) => {
            if (res.data.status) {
              this.reset()
              this.$emit('success')
            } else {
              this.$message.error(res.data.message)
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
